<!-- 对象类型响应数据 -->
<template>
  <div class="b">
    <h4>----------B----------</h4>
    <h5>reactive{{ car_reactive.brand }}车价值{{ car_reactive.price }}</h5>
    <h5>ref{{ car_ref.brand }}车价值{{ car_ref.price }}</h5>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">修改车</button>
    <ul>
      <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeGame1">修改游戏1的名字</button>
  </div>

</template>

<script setup lang="ts" name="B">
import { reactive, ref } from "vue"
let car_reactive = reactive({ price: 1000, brand: "奔驰" })
let car_ref = ref({ price: 1000, brand: "奔驰" })
let games = reactive([
  { id: 'lzc', name: '英雄联盟' },
  { id: 'zyt', name: '王者荣耀' }
])
let a = ref(1)
function changePrice() {
  car_reactive.price += 10
}
function changeGame1() {
  games[0].name = '绝地求生'
}
function changeCar() {
  // 修改reactive定义对象类型响应数据，用Object.assign()
  Object.assign(car_reactive, { price: 2000, brand: "宝马" })
  // 修改ref定义对象类型响应数据，用value即可
  car_ref.value = { price: 2000, brand: "宝马" }
}
</script>

<style></style>